<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="show()">点击 DOM0---1</button>
		<button id="btn">点击 DOM0---2</button>
		<script>
			// 事件定义  DOM0  DOM2
			//DOM0级
			//第一种: html与js没有分离
			function show(){
				console.log(this);//window
				console.log("111");
			}
			
			//DOM0级 第二种: html与js 进行了分离
			//如果同一个事件句柄绑定多个，后面把前面的覆盖
			//原理：给元素的事件属性赋值（赋值，只能一个值），必须有个这个事件属性
			//所有的事件都是在"冒泡阶段"触发
			btn.onclick=function(){
				console.log(this);//触发事件的元素--button
				console.log("2222");
			}
			
			// function fn(){
			// 	console.log(this);//触发事件的元素--button
			// 	console.log("2222");
			// }
			// btn.onclick=fn;
			
			btn.onclick=function(){
				console.log("3333");
			}
			console.dir(btn);
			
			//DOM0 取消事件绑定
			btn.onclick=null;
		</script>
	</body>
</html>
